<template>

	<li>
		<div :class="isActive" @click.stop="toggle">
			<i :class="nodeIcon"></i>
			<span>{{node.name}}</span>
			<span class="listcount">{{node.children?node.children.length:0}}</span>
		</div>
		<transition name="slide-fade">
			<ul v-if="open">
				<TreeItem class="item" v-for="(model, index) in node.children" :key="index" :node="model"></TreeItem>
			</ul>
		</transition>
	</li>
</template>

<script>
	export default {
		name: "TreeItem",
		props: {
			node: Object
		},
		data() {
			return {
				open: false
			};
		},
		computed: {
			isActive: function() {
				if (this.node.id == this.$store.state.currTreeNode) {
					return "list-item-" + this.node.level + " active";
				} else {
					return "list-item-" + this.node.level;
				}
			},
			isFolder: function() {
				return this.node.children && this.node.children.length;
			},
			nodeIcon: function() {
				var hasChildren = this.node.children && this.node.children.length;

				if (hasChildren) {
					return this.open ?
						"nodeicon fa fa-caret-down" :
						"nodeicon fa fa-caret-right";
				} else {
					return "";
				}
			}
		},
		methods: {
			toggle: function() {
				this.$store.commit("updateCurrTreeNode", this.node.id);
				if (this.isFolder) {
					this.open = !this.open;
				}
			}
		}
	};
</script>

<style>
	.slide-fade-enter-active {
		transition: all .3s ease;
	}

	.slide-fade-leave-active {
		transition: all .3s cubic-bezier(0, 0.5, 0.8, 1.0);
	}

	.slide-fade-enter,
	.slide-fade-leave-to {
		transform: translateY(5px);
		opacity: 0;
	}
</style>
